// ************************列表加载
get()
function get() {
  $.ajax({
    url: '/my/article/cates',
    success: function (res) {
      if (res.status == 0) {
        let str = '';
        res.data.forEach(item => {
          str += `<tr>
          <td>${item.name}</td>
          <td>${item.alias}</td>
          <td>
            <button type="button" class="layui-btn layui-btn-xs btnEdit" data-name="${item.name}" data-alias="${item.alias}" data-id="${item.Id}">编辑</button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btnDelete" data-id="${item.Id}">删除</button>
          </td>
        </tr>`
        });
        $('tbody').html(str)
      }
    }
  })
}

let layer = layui.layer;
let form = layui.form;
// ************************删除
$('tbody').on('click', '.btnDelete', function () {
  layer.confirm('你确定要删除吗?', (index) => {
    // 1.获取点击对应id
    let id = $(this).attr('data-id')

    // 2.发送请求
    $.ajax({
      url: '/my/article/deletecate/' + id,
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          get()
        }
      }
    })
  })
})



// *************************新增
let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
`
// 1.注册点击
$('.add').click(function () {

  // 2.弹窗
  let index = layer.open({
    type: 1,
    content: add_str,
    title: '添加类别',
    area: ['500px', '250px']
  })

  // 3.注册提交事件
  $('.add-form').on('submit', function (e) {
    e.preventDefault();
    // 4.收集数据
    $.ajax({
      url: '/my/article/addcates',
      type: 'post',
      data: $(this).serialize(),
      success: function (res) {
        layer.msg(res.message);
        if (res.status == 0) {
          get()
          layer.close(index)
        }
      }
    })
  })
})

// *************************编辑
let edit_str = `
  <form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="abc">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <input type="hidden" name="Id">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
      </div>
    </div>
  </form>
  `
$('tbody').on('click', '.btnEdit', function () {
  // 0.回到页面列表生成的地方,name别名.id设置自定义属性绑定在每一个编辑按钮上
  //   把点击该项对应的数据获取到;
  let Id = $(this).attr('data-id')
  let name = $(this).attr('data-name')
  let alias = $(this).attr('data-alias')

  // 1.准备一个弹窗
  let index = layer.open({
    type: 1,
    content: edit_str,
    title: '编辑类别',
    area: ['500px', '250px']
  })
  // 2.对弹窗内form进行赋值
  form.val('abc', {
    name: name,
    alias: alias,
    Id: Id
  });
  $('#edit_form').on('submit', function (e) {
    e.preventDefault()
    $.ajax({
      url: '/my/article/updatecate',
      type: 'post',
      data: $(this).serialize(),
      success: function (res) {
        // 无论成功失败,都给提示
        layer.msg(res.message);
        if (res.status == 0) {
          // 添加成功，重新渲染列表
          get()
          // 关闭弹出层
          layer.close(index)
        }
      }
    })
  })
})